<template>
  <div class="t-table-edit-cell" style="width:100%;">
    <WfTable
      isEdit
      isEditCell
      is-show-footer-btn
      :table="editConfig.table"
      :columns="editConfig.table.columns"
      :listTypeInfo="editConfig.listTypeInfo"
      @handleEvent2="handleEvent2"
      @save="save"
      @add="editAdd"
    />
    <el-button @click="printTableData">打印</el-button>
  </div>
</template>

<script>
  import WfTable from "@/views/elementPro/component/table/src/index";

  export default {
    name: 'TtableEditCell',
    components:{
      WfTable
    },
    data () {
      return {
        editConfig: {
          table: {
            border: true,
            firstColumn: { type: 'index', label: '序列' }, // 显示序列号
            data: [],
            columns: [
              { prop: 'name', label: '姓名', minWidth: '100', configEdit: { label: '姓名', type: 'input', editComponent: 'el-input' } },
              {
                prop: 'hobby',
                label: '爱好',
                minWidth: '180',
                configEdit: {
                  label: '爱好',
                  type: 'select-arr',
                  editComponent: 'el-select',
                  list: 'hobbyList',
                  // event: 'hobbyList',
                  arrLabel: 'label',
                  arrKey: 'value'
                }
              },
              {
                prop: 'number',
                label: '计数器',
                minWidth: '220',
                configEdit: {
                  label: '计数器',
                  type: 'inputNumber',
                  bind: { controls: true, min: 0, max: 99 },
                  editComponent: 'el-input-number'
                }
              },
              {
                prop: 'checkbox',
                label: '复选框',
                minWidth: '220',
                configEdit: {
                  label: '复选框',
                  type: 'checkbox',
                  list: 'hobbyList',
                  editComponent: 'el-checkbox-group'
                }
              }
            ],
            // 表格内操作列
            operator: [
              {
                type: 'danger',
                text: '删除',
                fun: this.editDel
              }
            ],
            // operatorConfig: {
            //   fixed: 'right'
            // }
          },
          // 下拉选择项
          listTypeInfo: {
            hobbyList: [
              { label: '吉他', value: '0' },
              { label: '看书', value: '1' },
              { label: '美剧', value: '2' },
              { label: '旅游', value: '3' },
              { label: '音乐', value: '4' }
            ]
          }
        }
      }
    },
    methods: {
      editAdd () {
        console.log('新增')
        const objAdd = {
          name: '',
          hobby: '',
          checkbox: [],
          number: 0
        }
        this.editConfig.table.data.push(objAdd)
      },
      editDel (row, index, tableData) {
        // row.splice(index, 1)
        console.log('删除', row, index, tableData)
      },
      // 编辑每一项的change事件
      handleEvent2 (type, val,index) {
        console.log( type, val,index)
      },

      save (data) {
        const flag = data.some(item => item.hobby === '') // 判断表格里数据hobby属性有没有空的
        if (flag) {
          this.$message.error('爱好不能为空')
          return
        }
        console.log('保存', data)
      },

      printTableData(){
        console.log("table.data",this.editConfig.table.data)
      },
    }
  }
</script>
